<template>
  <view class="guide-container">
    <swiper
      class="swiper"
      :indicator-dots="false"
      :autoplay="false"
      :duration="500"
      @change="onSwiperChange"
    >
      <swiper-item v-for="(item, index) in state.guideList" :key="index">
        <view class="swiper-item">
          <image :src="item.imageUrl" mode="aspectFill" class="swiper-image"></image>
          <view class="swiper-title">{{ item.title }}</view>
          <view class="swiper-content">{{ item.content }}</view>
          <view class="indicator-container">
            <view
              class="progress-main"
              :class="{ 'fade-out': state.currentIndex === state.guideList.length - 1 }"
            >
              <template v-for="(_, index) in state.guideList" :key="index">
                <view
                  class="progress-dot"
                  :class="state.currentIndex === index ? 'progress-bar' : 'progress-circle'"
                ></view>
              </template>
            </view>
            <view class="experience-main">
              <view
                class="experience"
                :class="{ 'fade-in': state.currentIndex === state.guideList.length - 1 }"
                @click="launchFlag"
              >
                立即登录
              </view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>

    <!-- 关闭按钮和倒计时 -->
    <view
      class="close-btn"
      @click="closeGuide"
      v-if="state.currentIndex != state.guideList.length - 1"
    >
      跳过
    </view>
  </view>
</template>

<script lang="ts" setup>
const state = reactive({
  currentIndex: 0,
  progressWidth: 0,
  countdown: 10, // 倒计时初始值（秒）
  timer: null,
  guideList: [
    {
      imageUrl: '/static/images/guide/guide1.png',
      title: '议享圈',
      content:
        '在议享圈一起开启一场思想的盛宴， 让智慧的火花，在交流中绽放，共同探索未知，享受思考的乐趣',
    },
    {
      imageUrl: '/static/images/guide/guide2.png',
      title: '课程管理',
      content:
        '灵活地发布和管理课程内容， 同时实时追踪学习动态，确保每一步学习进程都尽在老师掌控之中',
    },
    {
      imageUrl: '/static/images/guide/guide3.png',
      title: '智慧化管理',
      content:
        '个人信息概览，考试记录、班级管理详情、重要公告通知以及系统设置一应俱全，尽在我的专属页面之中',
    },
  ],
})
function updateProgress() {
  state.progressWidth = ((state.currentIndex + 1) / state.guideList.length) * 100
}
function onSwiperChange(e) {
  state.currentIndex = e.detail.current
  updateProgress()
}
function startCountdown() {}
function clearCountdown() {}
function closeGuide() {
  console.log('******')
  launchFlag()
}
function launchFlag() {
  /**
   * 向本地存储中设置launchFlag的值，即启动标识；
   */
  uni.setStorage({
    key: 'launchFlag',
    data: true,
  })
  uni.reLaunch({
    url: '/pages/login/index',
  })
}
</script>

<style lang="scss" scoped>
.guide-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.swiper {
  width: 100%;
  height: 100%;
}
.swiper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 30%;
  text-align: center;
}
.swiper-title {
  margin-top: 40rpx;
  font-family: AlibabaPuHuiTi;
  font-size: 48rpx;
  font-weight: bold;
  color: #3670f7;
}
.swiper-content {
  padding: 25rpx 88rpx 90rpx 133rpx;
  font-family: Alibaba PuHuiTi;
  font-size: 30rpx;
  font-weight: normal;
  line-height: 50rpx;
  color: #767c89;
}

.swiper-image {
  width: 570rpx;
  height: 542rpx;
}

.indicator-container {
  position: relative;
}
.progress-main {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40rpx 0;
  opacity: 1;
  transform: translateX(-50%);
  &.fade-out {
    opacity: 0;
    transition: all 0.3s ease;
    transform: translateX(-50%) translateY(20rpx);
  }
}

/* 使用 margin 来替代 gap */
.progress-main > * {
  margin-right: 15rpx;
}

/* 去除最后一个元素的 margin */
.progress-main > *:last-child {
  margin-right: 0;
}

.progress-dot {
  transition: all 0.3s ease;
}

.progress-bar {
  width: 45rpx;
  height: 16rpx;
  background: #3670f7;
  border-radius: 9px;
  transition: all 0.3s ease;
}

.progress-circle {
  width: 16rpx;
  height: 16rpx;
  background: #b2b5bd;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-btn {
  position: absolute;
  top: 80px;
  right: 52rpx;
  font-family: AlibabaPuHuiTi;
  font-size: 36rpx;
  font-weight: bolder;
  color: #3670f7;
}
.experience-main {
  width: 100%;
}
.experience {
  padding: 22rpx 240rpx;
  font-size: 32rpx;
  color: #ffffff;
  background: linear-gradient(270deg, #0d53ff 2%, #20a4ff 100%);
  border-radius: 50px;
  opacity: 0;
  &.fade-in {
    opacity: 1;
    transition: all 4s ease;
  }
}
</style>
